<html>
  <head>
    <meta charset="utf-8">
    <title>Vue 范例</title>
    <script src="vue.js"></script>
  </head>

  <body>
    <div id="app">
      <combobox :label="label"  v-model:country="country" :options="options"></combobox>
      <p>您所在的国家为：{{ country }}</p>
    </div>

    <script>
      const app=Vue.createApp({
        data(){
          return{
            options: ['China','USA','Japanese','France'],       
            country:'',
            label:'国家'
          }
        } 
      })

      app.component('combobox', {
        props:['label','country','options'],
        emits: ['update:country'],
        template: ` 
          <table><tr><td>
          {{label}}:<input :value="country" /> 
          </td><td>          
          <select :value="country" 
              @change="$emit('update:country', $event.target.value)">
            <option value="" disabled>请选择</option>
            <option v-for="option in options" :value="option">
              {{ option }}
            </option>
          </select>
          </td></tr></table>`
      })

      const vm=app.mount('#app')
    </script>

  </body>
</html>